<template>
    <div>
        <Export ref="exportExcel" file-name="导出" :columns="state.columns" :data="state.data" :reference="tableRef" :span-method="arraySpanMethod" :row-style="rowStyle" />
        <!-- ref导出 -->
        <button style="width: 200px; height: 100px;" @click="exportExcel.exportByColumns()">导出byColumns</button>
        <button style="width: 200px; height: 100px;" @click="exportExcel.exportByReference()">导出byReference</button>

        <Export
            ref="exportExcel"
            file-name="导出"
            :columns="state.columns"
            :data="state.data"
            :reference="tableRef"
            :span-method="arraySpanMethod"
            :header-cell-style="rowStyle"
            :header-row-style="rowStyle"
            :cell-style="rowStyle"
            :row-style="rowStyle"
        >
            <!-- 无需添加@click事件，导出优先级 byReference > byColumns -->
            <button style="width: 200px; height: 100px;">插槽按钮导出</button>
        </Export>
        <div style="height: 100px;" />
        <!-- 预览 -->
        <el-table
            ref="tableRef"
            :data="state.data"
            :span-method="arraySpanMethod"
            border
            style="width: 100%;"
        >
            <el-table-column type="index" :index="(index)=>index*10" label="序号" />
            <el-table-column type="selection" />
            <el-table-column prop="date" label="时间（byReference）" />
            <el-table-column label="外送信息">
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column label="地址信息">
                    <el-table-column prop="state" label="洲" />
                    <el-table-column prop="city" label="城市" width="120" export-auto-width />
                    <el-table-column prop="address" label="详细地址" :formatter="formatter" />
                    <el-table-column prop="zip" label="邮编" width="120" export-auto-width />
                </el-table-column>
            </el-table-column>
            <el-table-column label="slot">
                <template #default>
                    slot1
                </template>
            </el-table-column>
            <!-- 若需导出slot内容，则需要设置：export="slot"以及formatter，导出内容为formatter返回值 -->
            <el-table-column label="slot" prop="slot" export="slot" :formatter="formatter">
                <template #default>
                    <div style="color: red;">
                        slot2
                        <div>slot2 inner</div>
                    </div>
                    <el-button>butt</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
export default { name: 'ExcelExport' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'

import Export from '@/components/exceljsExport/index.vue'

// const slots = useSlots()
// const attrs = useAttrs()
// const emits = defineEmits()
const { proxy } = getCurrentInstance() as ComponentInternalInstance

const exportExcel = ref()
const state = reactive({
    // 若列中未定义"width"，则自动计算高度，或者设置列属性"exportAutoWidth"也会自动计算高度，优先级高于"width"
    columns: [
        { label: '序号', type: 'index', index: (index) => index * 10 },
        { type: 'selection' },
        { label: '时间（byColumns）', prop: 'date' },
        { label: '外送信息',
            children: [
                { label: '姓名', prop: 'name', width: '200' },
                { label: '地址信息',
                    children: [
                        { label: '洲', prop: 'state', width: '150', exportAutoWidth: true },
                        { label: '城市', prop: 'city', exportAutoWidth: true },
                        { label: '详细地址', prop: 'address', formatter: (row:any) => `详细地址：${row.address}` },
                        { label: '邮编', prop: 'zip', width: '150' },
                    ],
                },
            ],
        },
    ],
    data: [
        { date: '2016-05-03', name: 'Tom', state: 'California', city: 'Los Angeles', address: 'No. 189, Grove St, Los Angeles', zip: 'CA 90036' },
        { date: '2016-05-02', name: 'Tom', state: 'California', city: 'Los Angeles', address: 'No. 189, Grove St, Los Angeles', zip: 'CA 90036' },
        { date: '2016-05-04', name: 'Tom', state: 'California', city: 'Los Angeles', address: 'No. 189, Grove St, Los Angeles', zip: 'CA 90036' },
        { date: '2016-05-01', name: 'Tom', state: 'California', city: 'Los Angeles', address: 'No. 189, Grove St, Los Angeles', zip: 'CA 90036' },
        { date: '2016-05-08', name: 'Tom', state: 'California', city: 'Los Angeles', address: 'No. 189, Grove St, Los Angeles', zip: 'CA 90036' },
        { date: '2016-05-06', name: 'Tom', state: 'California', city: 'Los Angeles', address: 'No. 189, Grove St, Los Angeles', zip: 'CA 90036' },
        { date: '2016-05-07', name: 'Tom', state: 'California', city: 'Los Angeles', address: 'No. 189, Grove St, Los Angeles', zip: 'CA 90036' },
    ],
    // 可选样式项
    // 注意：颜色统一为ARGB
    style: {
        // css转义属性
        // 注意：同时写css转义样式以及对应的exceljs原生样式可能会出现样式覆盖情况
        border: '1px thin FFFF6600', // 第一个参数无效，可写可不写；第二个参数可选为：
        // thin             细实线
        // dotted           虚线
        // dashDot          长短虚线混合
        // hair             细虚线
        // dashDotDot       长短短虚线混合
        // slantDashDot     长短粗虚线混合
        // mediumDashed     未知
        // mediumDashDotDot 未知
        // mediumDashDot    未知
        // medium           未知
        // double           未知
        // thick            未知
        borderTop: '1px thin FFFF6600', // 写法同上
        borderRight: '1px thin FFFF6600', // 写法同上
        borderBottom: '1px thin FFFF6600', // 写法同上
        borderLeft: '1px thin FFFF6600', // 写法同上
        backgroundColor: 'FFFF6600', // 背景颜色，接受一个参数
        background: 'FFFF6600', // 写法同上
        fontStyle: 'italic', // 斜体，可选参数：'normal'或'italic'
        fontWeight: 'bold', // 粗体，可选参数：'normal'或'bold'
        textDecoration: 'underline', // underline下划线，lineThrough删除线，注意：若需同时实现两种样式，使用下方exceljs原生属性：underline、strike
        verticalAlign: 'superscript', // 上下对齐，可选参数：'superscript'或'subscript'；注意：该属性可能与字体大小冲突，建议使用alignment
        textAlign: 'superscript', // 左右对齐，可选参数：   注意：该属性可能与字体大小冲突，建议使用alignment
        // left             左对齐
        // center           居中对齐
        // right            右对齐
        // fill             未知
        // justify          未知
        // centerContinuous 未知
        // distributed      未知
        fontFamily: 'Calibri', // 字体
        fontSize: 12, // 字体大小
        color: 'FFFF6600', // 字体颜色
        // width: 10, // （无效）宽度

        // exceljs原生属性
        font: {
            name: 'Comic Sans MS', // 字体名称
            family: 4, // 备用字体家族。整数值
            scheme: 'minor', // 字体方案；可选值：'minor', 'major', 'none'
            charset: 1, // 字体字符集。整数值
            size: 16, // 字体大小。整数值
            color: { argb: 'FFFF0000' }, // 颜色描述，一个包含 ARGB 值的对象
            bold: true, // 字体 粗细
            italic: true, // 字体 倾斜
            underline: true, // 字体 下划线 样式；可选值：true, false, 'none', 'single', 'double', 'singleAccounting', 'doubleAccounting'
            strike: true, // 字体 删除线
            outline: true, // 字体轮廓
            vertAlign: 'superscript', // 垂直对齐；可选值：'superscript', 'subscript'
        },
        alignment: {
            vertical: 'top', // 上下对齐，可选参数：
            // top              上对齐
            // middle           居中对齐
            // bottom           下对齐
            // distributed      未知
            // justify          未知
            horizontal: 'left', // 左右对齐，可选参数：
            // left             左对齐
            // center           居中对齐
            // right            右对齐
            // fill             未知
            // justify          未知
            // centerContinuous 未知
            // distributed      未知
            wrapText: true, // 文本换行
            shrinkToFit: true, // 自适应
            indent: 1, // 缩进
            readingOrder: 'rtl', // 阅读顺序；可选值：'rtl'或'ltr'
            textRotation: 30, // 文本旋转，角度或字符：0 to 90；-1 to -90；'vertical'
        },
        // 边框的其它写法
        // 设置单个细边框
        // border: {
        //     top: { style: 'thin' },
        //     left: { style: 'thin' },
        //     bottom: { style: 'thin' },
        //     right: { style: 'thin' },
        // },
        // 设置双细绿色边框
        // border: {
        //     top: { style: 'double', color: { argb: 'FF00FF00' } },
        //     left: { style: 'double', color: { argb: 'FF00FF00' } },
        //     bottom: { style: 'double', color: { argb: 'FF00FF00' } },
        //     right: { style: 'double', color: { argb: 'FF00FF00' } },
        // },
        // 设置厚红十字边框
        // border: {
        //     diagonal: { up: true, down: true, style: 'thick', color: { argb: 'FFFF0000' } },
        // },
        // 填充
        fill: {
            type: 'pattern', // pattern图案填充；gradient渐变填充
            pattern: 'darkVertical', // 可选参数
            // none
            // solid
            // darkGray
            // mediumGray
            // lightGray
            // gray125
            // gray0625
            // darkHorizontal
            // darkVertical
            // darkDown
            // darkUp
            // darkGrid
            // darkTrellis
            // lightHorizontal
            // lightVertical
            // lightDown
            // lightUp
            // lightGrid
            // lightTrellis
            fgColor: { argb: 'FFFF0000' }, // 指定图案前景色。默认为黑色
            bgColor: { argb: 'FFFF0000' }, // 指定图案背景色。默认为白色
        },
        // 渐变填充示例
        // fill: {
        //     type: 'gradient',
        //     gradient: 'path', // 指定渐变类型。['angle'，'path'] 之一
        //     degree: 0, // 对于“角度”渐变，指定渐变的方向。0 是从左到右。值从 1-359 顺时针旋转方向
        //     center: { left: 0.5, top: 0.5 }, // 对于“路径”渐变。指定路径起点的相对坐标。“左”和“顶”值的范围是 0 到 1
        //     stops: [ // 指定渐变颜色序列。是包含位置和颜色（从位置 0 开始到位置 1 结束）的对象的数组。中间位置可用于指定路径上的其他颜色。
        //         { position: 0, color: { argb: 'FFFF0000' } },
        //         { position: 1, color: { argb: 'FF00FF00' } },
        //     ],
        // },
    },
})

// 导出会额外返回第五个参数，为字符串：'exportUse'
const formatter = (row, column, cellValue, index, exportUse) => {
    if (column.property === 'address') {
        return `详细地址：${row.address}`
    } if (column.property === 'slot') {
        return `slot：${row.address}`
    }
}
const tableRef = ref()
// 单元格合并仅允许正向合并（左上角合并至右下角），不可使用此方法删除单元格（不包括因合并单元格引发的单元格删除）
// 注意：谨慎使用index定位，导出列与element UI列可能不同
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (rowIndex === 1 && columnIndex === 1) {
        return [6, 1]
    } if (rowIndex === 2 && columnIndex === 1) {
        return [0, 1]
    } if (rowIndex === 3 && columnIndex === 1) {
        return [0, 1]
    } if (rowIndex === 4 && columnIndex === 1) {
        return [0, 1]
    } if (rowIndex === 5 && columnIndex === 1) {
        return [0, 1]
    } if (rowIndex === 6 && columnIndex === 1) {
        return [0, 1]
    }
}
// 注意：合并的单元格会被循环到多次，最后一次样式会覆盖前面的样式
// 注意：谨慎使用index定位，导出列与element UI列可能不同
// 循环从上到下，从左到右
const rowStyle = ({ row, rowIndex }) => {
    if (rowIndex === 0) {
        return {
            borderRight: 'slantDashDot #ee9922',
            background: '#ee9922',
            fontFamily: '宋体',
            fontSize: 32,
            // fontWeight: 'bold',
            // fontStyle: 'italic',
            // verticalAlign: 'sub',
            // textAlign: 'right',
            alignment: { vertical: 'middle', horizontal: 'center' },
        }
    }
}

onMounted(() => {

})

// defineExpose({

// })
// <style lang="scss" scoped>

// </style>
</script>
